import React, { memo, useEffect, useRef } from 'react';
import { useDispatch,useSelector, shallowEqual } from 'react-redux';
import { Carousel } from 'antd';

import ASThemeHeaderRCM from '../../../../../../components/theme-header-rcm'
// import { AlbumWrapper } from './style';
import { getNewAlbumAction } from '../../store/actionCreators'
import { AlbumWrapper } from './style'
import  ASAlbumCover  from '../../../../../../components/album-cover'
export default memo(function ASNewAlbum() {

  const { newAlbums } = useSelector(state => ({
    newAlbums: state.getIn(['recommend', 'newAlbums'])
  }),shallowEqual)


  // console.log(newAlbums)
  // redux hooks
  const dispatch = useDispatch()

  const pageRef = useRef()

  useEffect(()=> {
    dispatch(getNewAlbumAction(15))
  },[dispatch])
  return (
    <AlbumWrapper>
      <ASThemeHeaderRCM title="新碟上架" />
      <div className='content'>
        <button className='arrow arrow-left sprite_02'
                onClick={e => pageRef.current.prev()}></button>
        <div className='album'>
          <Carousel dots={false} ref={pageRef}>
            {
              [0, 1, 2].map((item, index) => {
                return (
                <div key={item} className='page'>
                  {
                    newAlbums.slice(item * 5, (item+1) * 5, (item + 2) * 5).map((iten,index) => {
                      return <ASAlbumCover key={iten.id} 
                                           info={iten} size={100} 
                                           width={118}  bgp='-570px'></ASAlbumCover>
                    })
                  }
                </div>
                )
              })
            }
          </Carousel>
        </div>
        <button className='arrow arrow-right sprite_02'
                onClick={e => pageRef.current.next()}></button>
      </div>
    </AlbumWrapper>
  )
})

